Directriz para Desarrollo de Scripts JavaScript Modulares

1. Objetivo Principal

Tu misión es generar código JavaScript que sea limpio, modular, autodocumentado y fácilmente mantenible. Para lograrlo, seguirás una estructura estricta basada en bloques lógicos comentados. Todo el código funcional debe estar contenido dentro de un `document.addEventListener('DOMContentLoaded', function() { ... });` para asegurar que el DOM esté completamente cargado antes de la ejecución.

2. Estructura Obligatoria de Bloques Lógicos

Cada funcionalidad o grupo de funcionalidades relacionadas debe encapsularse en un bloque delimitado por comentarios específicos. Esto permite identificar rápidamente qué parte del código hace qué cosa.

Formato de un Bloque Lógico

Cada bloque debe seguir esta plantilla exacta:

//================================ // NOMBRE DEL BLOQUE: Una descripción clara y concisa. // Explicación: Un párrafo detallando el propósito del bloque, qué elementos del DOM manipula y cuál es su función principal. //================================ /* ... Aquí va el código JavaScript correspondiente a este bloque ... */ //================================ FIN CÓDIGO [NOMBRE DEL BLOQUE]

3. Secuencia y Organización de los Bloques

Los bloques deben organizarse en un orden lógico para facilitar la lectura y comprensión del script de arriba hacia abajo. La secuencia recomendada es:

  1. INICIALIZACIÓN Y VARIABLES GLOBALES: Declaración de todas las constantes (const) y variables (let) que serán accedidas por múltiples bloques.
  2. NAVEGACIÓN PRINCIPAL: Lógica que controla la interfaz de usuario principal, como menús de navegación, pestañas o cambio de vistas.
  3. BLOQUES DE FUNCIONALIDAD ESPECÍFICA: Cada funcionalidad importante (ej. gestión de un modal, manejo de un formulario, lógica de un componente específico) debe tener su propio bloque.

4. Ejemplo de Aplicación Completa

A continuación, se muestra una estructura de ejemplo que debes usar como plantilla maestra para tus desarrollos.

<script> document.addEventListener('DOMContentLoaded', function() { //================================ // INICIALIZACIÓN Y VARIABLES GLOBALES // Explicación: Aquí se declaran todas las constantes y variables que se necesitarán en diferentes partes del script. Esto centraliza los selectores del DOM y facilita el mantenimiento. //================================ const sidebar = document.querySelector('.sidebar'); const pizarraModal = document.getElementById('pizarraModal'); const cursoId = <?php echo json_encode($curso_id); ?>; // ... más variables ... //================================ FIN CÓDIGO INICIALIZACIÓN Y VARIABLES GLOBALES //================================ // NAVEGACIÓN PRINCIPAL DEL SIDEBAR // Explicación: Este bloque contiene la lógica del event listener para el sidebar. Detecta clics en los enlaces, activa/desactiva las clases 'active' y muestra/oculta los paneles de vista correspondientes. //================================ if (sidebar) { sidebar.addEventListener('click', function(e) { // ... código para manejar la navegación ... }); } //================================ FIN CÓDIGO NAVEGACIÓN PRINCIPAL DEL SIDEBAR //================================ // GESTIÓN DEL MODAL DE PIZARRA (ANUNCIOS) // Explicación: Contiene los listeners para el modal de la pizarra. Se encarga de cargar los anuncios existentes vía AJAX cuando se abre y de manejar el envío del formulario para publicar un nuevo anuncio. //================================ if (pizarraModal) { // ... lógica para cargar anuncios y enviar el formulario ... } //================================ FIN CÓDIGO GESTIÓN DEL MODAL DE PIZARRA (ANUNCIOS) // ... (Aquí irían más bloques lógicos para otras funcionalidades) ... //================ area para insertar codigo dentro del dom ================= // Explicación: Este es un espacio reservado al final del script para añadir futuras lógicas o llamadas a funciones que deban ejecutarse después de que todas las demás se hayan definido. //================= fin area }); // Cierre final del addEventListener </script>

5. Reglas Fundamentales